<template>
  <div
       class="w-full h-20 flex flex-row justify-center items-center cursor-pointer hover:bg-primary/10">
    <div class="w-1/12 h-full flex justify-center items-center text-2xl text-base-content/80">{{
        props.index + 1
      }}
    </div>
    <div class="w-1/12 flex justify-center items-center text-2xl text-base-content/80 rounded-full">
      <label :for="'favorite' + props.index " >
        <svg @click="addOrRemoveFavorite()"
             xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
             stroke="currentColor" stroke-width="1.5"
             :class="[ {'fill-pink-400': isFavorite},'w-8 h-8 rounded-full ']">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"/>
        </svg>
      </label>

    </div>
    <div @click="toSongInfo()" class="w-8/12 md:w-8/12 h-full flex flex-col justify-center items-start ml-2">
      <div>{{ props.song['name'] }}</div>
      <div>{{ props.song['singer'] }}</div>
    </div>

    <div  class="w-2/12 md:w-1/12 flex justify-center items-center rounded-full" @click.stop>
      <label :for="'songBarConfig'+props.index" >
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
             class="w-6 h-6 rounded-full hover:btn-ghost">
          <path stroke-linecap="round" stroke-linejoin="round"
                d="M12 6.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 12.75a.75.75 0 110-1.5.75.75 0 010 1.5zM12 18.75a.75.75 0 110-1.5.75.75 0 010 1.5z"/>
        </svg>
      </label>
      <!--TODO 歌曲设置modal-->
      <input type="checkbox" :id="'songBarConfig'+props.index" class="modal-toggle"/>
      <div class="modal">
        <div class="modal-box relative" @click.stop>
          <label :for="'songBarConfig'+props.index" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
          <h3 class="text-lg font-bold divider">歌曲：{{ props.song['name'] }}</h3>
          <label :for="'songBarConfig'+props.index"
                 @click="hook_addSongToPlayerList(props.song,true)"
                 class="flex flex-row justify-start items-center my-2 m-auto gap-2 max-w-xs btn btn-success">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M5.25 5.653c0-.856.917-1.398 1.667-.986l11.54 6.348a1.125 1.125 0 010 1.971l-11.54 6.347a1.125 1.125 0 01-1.667-.985V5.653z"/>
            </svg>
            <div>播放</div>
          </label>
          <div v-if="useAuthStore().isAuthenticated?? false">
            <label :for="'modal_add'+ props.song?.id"
                   @click.self="updatePlaylist()"
                   class="flex flex-row justify-start items-center w-full my-2 m-auto gap-2 max-w-xs btn btn-info">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                   stroke="currentColor" class="w-6 h-6">
                <path stroke-linecap="round" stroke-linejoin="round"
                      d="M12 10.5v6m3-3H9m4.06-7.19l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z"/>
              </svg>
              <div>添加到歌单</div>
            </label>
          </div>


          <label v-if="props.playlist?.['userId'] == hook_getUser()?.['id']"
                 :for="'songBarConfig'+props.index"
                 @click="deleteSongFromPlaylist()"
                 class="flex flex-row justify-start items-center my-2 m-auto gap-2 max-w-xs btn btn-error">
            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                 stroke="currentColor" class="w-6 h-6">
              <path stroke-linecap="round" stroke-linejoin="round"
                    d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"/>
            </svg>
            <div>删除</div>
          </label>
        </div>
        <!--TODO 添加歌单modal-->
        <input type="checkbox" :id="'modal_add'+ props.song?.id" class="modal-toggle"/>
        <div class="modal">
          <label class="modal-box">
            <label :for="'modal_add'+ props.song?.id" class="btn btn-sm btn-circle absolute right-2 top-2">✕</label>
            <h3 class="text-lg font-bold">{{ props.song['name'] }}</h3>
            <p class="py-4">将歌曲添加至下列歌单中</p>
            <label v-for="(playlist,index) in playlists"
                   :for="'modal_add'+ props.song?.id"
                   @click="addSongToPlaylist(playlist?.['id'])"
                   :class="[{'hidden':playlist?.['id']== props?.playlistId },
                   'btn btn-primary w-full max-w-sm my-2']"
                   :key="index">
              {{ playlist?.['name'] + '-' + playlist?.['remark'] }}
            </label>
          </label>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  hook_addSongToFavorite,
  hook_checkSongIsFavorite,
  hook_deleteFavoriteSongByUserId
} from "../hook/FavoriteHook.ts";
import {hook_getFavorite, hook_getUser} from "../hook/UserHook.ts";
import {hook_addSongToPlayerList} from "../hook/SongPlayerHook.ts";
import {onBeforeMount, ref} from "vue";
import {hook_addPlaylistSong, hook_deleteSongFromPlaylist, hook_findPlaylistsByUserId} from "../hook/PlaylistHook.ts";
import router from "../plugins/router.ts";
import {useAuthStore} from "../plugins/pinia.ts";

let props = defineProps<{
  index: any
  song: any
  isPlaylist: boolean
  playlistId?
  playlist?
}>()
let isFavorite = ref()

onBeforeMount(() => [
  updateData()
])

let emit = defineEmits<{
  (e: 'deleteSongBar', i: number): void
}>()


async function addOrRemoveFavorite() {
  console.log(isFavorite.value)
  if (!isFavorite.value) {
    await hook_addSongToFavorite(props.song['id'])
    isFavorite.value = true
  } else {
    await hook_deleteFavoriteSongByUserId(hook_getUser().id, props.song['id'])
    isFavorite.value = false
    //删除掉后通知父组件删除对应的dom元素
    if (!props.isPlaylist) {
      //不是歌单 ，那就是收藏夹
      emit('deleteSongBar', props.index)
    }
  }
}

async function updateData() {
  isFavorite.value = await hook_checkSongIsFavorite(hook_getFavorite()['id'], props.song['id'])
}

function deleteSongFromPlaylist() {
  hook_deleteSongFromPlaylist(props.playlistId, props.song.id)
  //删除掉后通知父组件删除对应的dom元素
  emit('deleteSongBar', props.index)
}

//toSongInfo
function toSongInfo() {
  router.push("/songInfo/" + props.song.id);
  hook_addSongToPlayerList(props.song, true)
}

function addSongToPlaylist(playlistId) {
  hook_addPlaylistSong(playlistId, props.song.id)
}

let playlists = ref()

async function updatePlaylist() {
  playlists.value = await hook_findPlaylistsByUserId(hook_getUser().id)
}


</script>

<style scoped>

</style>